<template>
  <div class="main-tradebox">
    <el-table
      class="top_nav"
      :data="tableData.slice((page - 1) * pageSize, pageSize * page)"
      style="width: 100%"
    >
      <el-table-column prop="name" width="300">
        <template slot-scope="scope">
          <div class="mill_name">
            <img src="../../assets/images/mill/mill.png" alt="" />
            <div class="mill_nav">
              <span>{{ scope.row.name }}</span>
              <!-- <span>{{scope.row.wdate}}</span> -->
              <span>单价：{{ scope.row.paynumber }} {{scope.row.paycoin}}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dayincome outputcoin" width="250">
        <template slot-scope="scope">
          <div class="mill_title">预估收益</div>
          <div class="mill_text">
            {{ scope.row.dayincome + scope.row.outputcoin }}
          </div>
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column prop="enddate" width="250">
        <template slot-scope="scope">
          <div class="mill_title">到期时间</div>
          <div class="mill_text">{{scope.row.enddate}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="state" width="250">
        <template slot-scope="scope">
          <div class="mill_title">状态</div>
          <div class="mill_text" v-if="scope.row.state == 'enable'" style="color: #41b37d">
           运行中
          </div>
          <div
            class="mill_text"
            v-else-if="scope.row.state == 'close'"
            style="color: #e6a23c"
          >
          已到期
          </div>
          <div
            class="mill_text"
            v-else-if="scope.row.state == 'disable'"
            style="color: #ffffff"
          >
            终止审核中
          </div>
          <div class="mill_text" v-else style="color: #357ce1">{{ text }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="" width="250">
        <template slot-scope="scope">
          <div class="mill_title">操作</div>
          <div class="mill_text">
            <el-button type="primary" size="mini" @click="changeClick(scope.row)"
              >终止租赁</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="display: flex; align-items: center">
      <el-pagination
        class="pagination"
        background
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="changecurrent"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 终止租赁的弹框 -->
     <div>
      <el-dialog
      title="你确定要终止矿机租赁吗？"
       :visible.sync="dialogVisible"
        width="30%"
        center
      >
       <div class="shopDetail">
    
          <p>商品名称:{{formLabelAlign.name}}</p>
          <p>商品单价:<span>{{formLabelAlign.paynumber}} {{formLabelAlign.paycoin}}</span>
          </p>
          
       </div>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="输入密码" prop="paypassword" 
            <el-input v-model="formLabelAlign.paypassword" show-password>></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureCancel">确 定</el-button>
        </span>
      </el-dialog>
    </div>

   
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: "运行中",
      pageSize: 4,
      page: 1,
      total: 5,
      dialogVisible: false,
      handleClose: "",
      tableData: [
        {
          page: 1,
          limit: 10,
        },
      ],
       labelPosition: 'right',
        formLabelAlign: {
          paypassword:"",
        },
        
        
    };
  },
  created(){
   this.add_min();
  
  },
  filters: {
    colors: (value) => {
      if (!value) return value;
      switch (value) {
        case "运行中":
          return "#41b37d";
          break;
        case "已到期":
          return "#e6a23c";
          break;
        case "已终止":
          return "#ffffff";
          break;
        case "终止审核中":
          return "#357ce1";
          break;
      }
    },
  },
  methods: {

    changeClick(row){
      this.dialogVisible=true
      this.formLabelAlign.autoid = row.autoid
      this.formLabelAlign.paycoin=row.paycoin
      this.formLabelAlign.name = row.name
      this.formLabelAlign.paynumber = row.paynumber
      this.formLabelAlign.paypassword = row.paypassword
      
    
    },
    //阻止购买矿机
    sureCancel(a) {
       this.tabData = this.formLabelAlign
        if(this.formLabelAlign.paypassword==''){
        this.errMsg("请填写交易密码");
        return false;
      }
      this.request(this.api.close_min, this.tabData).then((res) => {
        if (res.code == 0) {
          this.successMsg(res.msg || "操作成功");
    
          
        }else{
            this.errMsg(res.msg);
        }
        this.dialogVisible = false;
      });
    },

    add_min() {
      return this.request(this.api.add_min, this.tableData).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.tableData = res.data;
          this.total = res.data.length;
        }
      });
    },

    changecurrent(current) {
      console.log(current);
      this.page = current;
    },
  },
};
</script>
<style lang="scss" scoped>
 /deep/.el-button{
   padding: 5px 20px;
 }
/deep/ .shopDetail{

  p{
    font-size: 14px;
    margin:10px 0 10px  15px;
    
  }
  p:nth-child(1){
   font-size: 14px;
   line-height: 40px;
   font-weight: bold;

  }

  p:nth-child(2){
    font-size: 14px;
    line-height: 20px;
    // font-weight: bold;
    margin-bottom: 20px;
    span{
      color: red;
    }
  }
}
.el-icon-warning {
  color: #357ce1;
  font-size: 50px;
}
img {
  width: 121px;
  height: 121px;
}
.main-tradebox {
  width: 100%;
  .top_nav {
    width: 100%;
    padding: 0 200px;
    box-sizing: border-box;
  }
  .el-table__body {
    .el-table__row {
      height: 100px !important;
    }
  }
  .mill_name {
    display: flex;
    width: 320px;
    .mill_nav {
      margin-left: 10px;
      height: 121px;
      // padding: 10px 0;
      span {
        display: block;
      }
      span:nth-child(1) {
        font-size: 16px;
        line-height: 32px;
        font-weight: 700;
      }
      // span:nth-child(2) {
      //   font-size: 14px;
      //   line-height: 30px;
      //   color: #999;
      // }
      span:nth-child(2) {
        margin-top: 25px;
        font-size: 16px;
        color: #e44e5e;
        font-weight: 700;
      }
    }
  }
  .mill_title {
    font-size: 14px;
    color: #999;
    text-align: center;
  }
  .mill_text {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin-top: 60px;
  }
  .pagination {
    margin: 57px auto 67px;
  }
}
</style>
  